<extend name="./base" />
<block name="pageContent">
    <link rel="stylesheet" type="text/css" href="/Public/AdminTpl/webUploader/css/webuploader.css" />
    <link rel="stylesheet" type="text/css" href="/Public/AdminTpl/webUploader/css/style.css" />
    <div class="main-content">
        <!-- 头部面包屑导航条 -->
        <div class="breadcrumbs" id="breadcrumbs">
            <!--导航路径列表-->
            <ul class="breadcrumb no-margin-left">
                <li>
                    <a>管理后台</a>
                </li>
                <li class="action">
                    商品管理
                    <i class="fa fa-times ace-icon"></i>
                </li>
            </ul>
        </div>
        <!--页面容器-->
        <div class="page-content">
            <div class="nav-tab" style="position: relative">
                <ul class="nav-tab-title ">
                    <li class="nav-this">商品新增</li>
                </ul>
            </div>
            <div class="row">
                <ol class="pull-left  clearfix lecturer-contet-title" style="overflow: hidden;margin-bottom: 10px;">
                    <li class="pull-left list-back borderright border-blue" onclick="changeTab(this,'onetab')">基本信息</li>
                    <li class="pull-left bordereight borderleft " id="twoli" onclick="changeTab(this,'twotab')">商品详情</li>
                </ol>
                <!-- 基本信息-->
                <form class="jsform" onsubmit="return subForm();">
                    <div class="col-xs-12 " id="onetab">
                        <div class="s_form-textarea s_share-textarea">
                            <span>商品名称</span>
                            <input placeholder="请输入商品名称" id="goodsName" datatype="*" class="form-control s_form-width">
                        </div>
                        <div class="s_form-textarea s_share-textarea">
                            <span>商品图片</span>
                            <ul class="ace-thumbnails clearfix" id="goodsMainPicUl">
                                <li style="background: #f5f6f8" class="upImg">
                                    <div class="text-center border-hui" id="goodsMainPic" style="padding-top: 0px;width: 130px;height: 90px;">
                                        <img src="/Public/AdminTpl/img/edit_add_icon.png">
                                        <div class="space-4"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div class="s_form-textarea s_share-textarea">
                            <span>金币</span>
                            <input placeholder="请输入价格" datatype="*" id="goodsCoin" class="form-control s_form-width">
                            <img src="/Public/AdminTpl/img/user/jinbi_icon.png" alt="123" class="s_user-icon">
                        </div>
                        <!--<div class="s_form-textarea s_share-textarea">-->
                            <!--<span>余额</span>-->
                            <!--<input placeholder="请输入余额" datatype="*" id="goodsMoney" class="form-control s_form-width">-->
                            <!--<img src="/Public/AdminTpl/img/user/money_icon.png" alt="123" class="s_user-icon">-->
                        <!--</div>-->
                        <div style="margin: 50px 80px;">
                            <button class="btn" onclick="nextTab()" type="button" style="width: 100px; border-radius: 2rem; background: #0451d7!important;border:1px solid #0451d7;margin-left: 20px;">下一步</button>
                            <button class="btn"  onclick="history.back()" type="button" style="width: 100px; border-radius: 2rem; border:1px solid #999999;margin-left: 20px;color:#999 !important;background: #fff">取消</button>
                        </div>
                    </div>
                <!--商品详情-->
                    <div class="col-xs-12" style="display: none" id="twotab">
                        <div class="s_form-textarea s_share-textarea">
                            <span>商品介绍</span>
                            <textarea placeholder="请输入商品介绍" id="goodsIntro" class="form-control"></textarea>
                        </div>
                        <!--<p class="s_share-p" style="text-align: right"><span>1</span>/10</p>-->
                        <div class="s_form-textarea s_share-textarea">
                            <span>详情图片</span>
                            <ul class="ace-thumbnails clearfix" id="goodsInfoPicUl">
                                <li style="background: #f5f6f8" class="upImg">
                                    <div class="text-center border-hui" id="goodsInfoPic" style="padding-top: 0px;width: 130px;height: 90px;">
                                        <img src="/Public/AdminTpl/img/edit_add_icon.png">
                                        <div class="space-4"></div>
                                    </div>
                                </li>
                            </ul>
                        </div>
                        <div style="margin: 50px 80px;">
                            <button class="btn " type="submit" style="width: 100px; border-radius: 2rem; background: #0451d7!important;border:1px solid #0451d7;margin-left: 20px;">保存</button>
                            <button class="btn " type="button" onclick="history.back()"  style="width: 100px; border-radius: 2rem; border:1px solid #999999;margin-left: 20px;color:#999 !important;background: #fff">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <script type="text/javascript" src="/Public/AdminTpl/webUploader/dist/webuploader.js"></script>
    <script type="text/javascript" src="/Public/AdminTpl/webUploader/dist/goodsupload.js"></script>
    <script>
        //webupload
        $(document).ready(function () {
            createUpload('goodsMainPic');
            createUpload('goodsInfoPic');
            $('.upImg').click(function () {
                thisContainer = $(this);
            });
        });
        function createUpload(upid) {
            uploader.addButton({
                id: '#'+upid,
                innerHTML: ''
            });
        }
        $(".jsform").Validform();
        //提交表单
        function subForm() {
            var croveImg = $('#goodsMainPicUl').find('.logoarr').val();
            if(!croveImg){
                layer.msg('请上传商品图片', {icon: 5,time: 1500});
                return false;
            }
            var infoImg = $('#goodsInfoPicUl').find('.logoarr').val();
            if(!infoImg){
                layer.msg('请上传商品详情图片', {icon: 5,time: 1500});
                return false;
            }
            var mainPic = [];
            $('#goodsMainPicUl').find('.logoarr').each(function(){
                mainPic.push($(this).val());
            });
            var infoPic = [];
            $('#goodsInfoPicUl').find('.logoarr').each(function(){
                infoPic.push($(this).val());
            });

            if(!$('#goodsName').val() || !$('#goodsCoin').val()){
                return false;
            }
            $.ajax({
                type:"post",
                dataType:"json",
                async:false,//同步方式
                url:"/goods/addGoods",
                data:{
                    name: $('#goodsName').val(),
//                    need_money:$('#goodsMoney').val(),
                    need_coin:$('#goodsCoin').val(),
                    info:$('#goodsIntro').val(),
                    mainPic:mainPic,
                    infoPic:infoPic
                },
                success:function(data){
                    if(data.code == 0){
                        location.href = '/goods/index?tip=1';
                    }else{
                        layer.msg(data.msg, {icon: 5,time: 1500});
                        return false;
                    }
                }
            });
            return false;
        }
        //切换tab
        function changeTab(that,id) {
            $(that).addClass('border-blue').siblings().removeClass('border-blue');
            $('#onetab').hide();
            $('#twotab').hide();
            $('#'+id).show();
        }
        function nextTab() {
            changeTab($('#twoli'),'twotab');
        }
    </script>
</block>